﻿<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>Crunchy Responsive Creative Template</title>
	<meta name="description" content="" />
	<meta name="author" content="" />
	<!--[if lt IE 9]>
		<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/skeleton.css" />
	<link rel="stylesheet" href="css/screen.css" />
    <link rel="stylesheet" href="css/mediaelementplayer.css" />
    <!--[if IE 7]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    
    <!-- Fonts
	================================================== -->
    <link href='http//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css' />
    
    <!-- Scripts
	================================================== -->
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
    <script src="js/ddsmoothmenu.js" type="text/javascript"></script>
    <script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
    <script src="js/jquery.fitvids.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/screen.js" type="text/javascript"></script>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>

	<!-- Site Backgrounds
	================================================== -->
	
    <!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
	<div class="poswrapheaderline wide"><div class="headerline full"></div></div>  
    <!-- Remove or uncomment depending on if you want a background image or tile -->
    <!--div class="tiledbackground"></div-->
    <img src="images/backgrounds/bg10.jpg" alt="" id="background" />
    <!-- Remove the bgoverlay div if you don't want the dark pattern overlay above the image -->
    <div class="bgoverlay"></div>
    <!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
    <div class="poswrapper"><div class="whitebackground"></div></div>

	<div class="container main portfolio4column">
    	
        <!-- Header | Logo, Menu
		================================================== -->
	
		<div class="sixteen columns header">
        
			<a href="index.html" class="logohover"><div class="logo"></div></a>
            <div class="mainmenu">
                <div id="mainmenu" class="ddsmoothmenu">
                    <ul>
                        <li><a href="#">Home</a>
                            <ul>  
                                <li><a href="index.html">Home Layout</a></li>
                                <li><a href="index_alternative.html">Portfolio Layout Example</a></li>
                                <li><a href="index_noslider.html">Video Layout</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Features</a>
                            <ul> 
                            	<li><a href="page_shortcodes.html">Shortcodes</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_full.html">Typography Full Page</a></li>
                                <li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
                                <li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
                                <li><a href="#">Another Menu Level</a>
                                    <ul>  
                                        <li><a href="#">Menu Entry One</a></li>
                                        <li><a href="#">Menu Entry Two</a></li>
                                        <li><a href="#">Menu Entry Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Portfolio</a>
                            <ul>  
                                <li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
                                <li><a href="portfolio_1column_full.html">Portfolio One Column</a></li>
                                <li><a href="portfolio_single.html">Project Detail Page</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Blog</a>
                            <ul>  
                                <li><a href="blog_overview.html">Blog Overview</a></li>
                                <li><a href="blog_single.html">Single Blog Post</a></li>
                                <li><a href="blog_overview_full.html">Blog Overview Full</a></li>
                                <li><a href="blog_single_full.html">Single Blog Post Full</a></li>
                            </ul>
                        </li>	
                        <li><a href="contact.html">Contact</a></li>	
                    </ul>
                    <br style="clear: left" />
                </div>
                
                <!-- Responsive Menu -->
                
				<form id="responsive-menu" action="#" method="post" />
                    <select>
                        <option value="" />Navigation
                    </select>
				</form>
				
            </div>
		</div>
    
        <!-- Page Title And Social
		================================================== -->
        
		<div class="pagetitle">
        	<div class="pagetitleholder"><h1>Useful shortcodes<br />tabs, accordions and <span style="color:#ffd200;">more</span>.</h1></div>
            <div class="socialholder">
            	<ul class="socialicons">
                	<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
                    <li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
                    <li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
                    <li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
                    <li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
                    <li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
                    <li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
                    <li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
                </ul>
			</div>
            <!--div class="headersearch">
                <form class="searchform" method="get" action="#">
                <input name="s" id="s" type="text" onFocus="if(this.value == 'Enter Search here...') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Enter Search here...'; }" value="Enter Search here..." />
                </form>
            </div-->
        </div>
        
        <!-- Line Divider
		================================================== -->
        
        <div class="sixteen columns linedivider" style="margin-top: 0;"></div>
        
        <!-- Text Block
		================================================== -->
        
		<div class="sixteen columns row textblock">
        
            <!-- Divider With Title -->
            <div class="divide">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">Tabs</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                </tr></table>
            </div>
			
			<!-- Content Tabs -->
        	<ul class="tabs">
                <li><a class="active" href="#concept">Project Conception</a></li>
                <li><a href="#design">Graphic Design</a></li>
                <li><a href="#hosting">Web Hosting</a></li>
                <li><a href="#support">24h-Support</a></li>
            </ul>
            <ul class="tabs-content clearfix">
                <li class="active clearfix" id="concept">
                    <div class="one_third">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
                    </div>
                    <div class="one_third">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
                    </div>
                    <div class="one_third lastcolumn">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p></div><div class="clear"></div>
                </li>
                <li id="design" class="clearfix">
                	<div class="one_third">
                    	<p>Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                    </div>
                    <div class="two_third lastcolumn">
                    	<blockquote>„ A Design that also works great <strong>without Images or Sliders</strong>!<br />There are Layouts available for all kinds of content.“<cite>Damojo</cite></blockquote>
                    </div><div class="clear"></div>
                </li>
                <li id="hosting" class="clearfix">
                	<div class="one_third"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div>
                    <div class="two_third lastcolumn"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></div>
                </li>
                <li id="support" class="clearfix">
                    <div class="two_third"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></div>
                    <div class="one_third lastcolumn"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div>
                </li>
            </ul><div class="clear"></div>
			
			<!-- Divider With Title -->
            <div class="divide">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">Accordions</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                </tr></table>
            </div><div class="clear"></div>
			
			<!-- Accordion -->
            <ul class="accordion">
                <li class="accordion-item">
                    <div class="toggleswitch"><div class="togglegfx"></div>Is there also a WordPress version of the Crunchy Template?</div>
                    <div class="togglecontent">
                    <p>Yes! It can be found <a href="http//themeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062?ref=damojo" target="_blank">here</a>.<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>         
                    </div>
                </li>
                <li class="accordion-item">
                    <div class="toggleswitch"><div class="togglegfx"></div>Can colors be changed?</div>
                    <div class="togglecontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>         
                    </div>
                </li>
                <li class="accordion-item">
                    <div class="toggleswitch"><div class="togglegfx"></div>How many pages are included?</div>
                    <div class="togglecontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>         
                    </div>
                </li>
                <li class="accordion-item">
                    <div class="toggleswitch"><div class="togglegfx"></div>Can the footer be removed easily?</div>
                    <div class="togglecontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>         
                    </div>
                </li>
            </ul><div class="clear"></div>
			
			<!-- Divider With Title -->
            <div class="divide">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">Pricing Tables</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                </tr></table>
            </div><div class="clear"></div>
			
			<div class="pricing fourcols">
            
            	<div class="pricecol">
                	<ul>
                    	<li class="thead">Basic Package</li>
                        <li class="price">$ 13.95 <span>(excl. vat)</span></li>
                        <li class="item">2 GB Webspace</li>
                        <li class="item">1 Domain</li>
                        <li class="item"><span class="no">PHP 5 enabled</span></li>
                        <li class="item"><span class="no">24h - Support</span></li>
                        <li class="buy"><a href="#" class="button dark">Choose <span class="buttonarrow"></span></a></li>
                    </ul>
                </div>
                
                <div class="pricecol light">
                	<ul>
                    	<li class="thead">Advanced Package</li>
                        <li class="price">$ 17.95 <span>(excl. vat)</span></li>
                        <li class="item">4 GB Webspace</li>
                        <li class="item">2 Domains</li>
                        <li class="item"><span class="yes">PHP 5 enabled</span></li>
                        <li class="item"><span class="no">24h - Support</span></li>
                        <li class="buy"><a href="#" class="button dark">Choose <span class="buttonarrow"></span></a></li>
                    </ul>
                </div>
                
                <div class="pricecol highlight">
                	<ul>
                    	<li class="thead">Smart Package</li>
                        <li class="price">$ 19.95 <span>(excl. vat)</span></li>
                        <li class="item">8 GB Webspace</li>
                        <li class="item">4 Domains</li>
                        <li class="item"><span class="yes">PHP 5 enabled</span></li>
                        <li class="item"><span class="no">24h - Support</span></li>
                        <li class="buy"><a href="#" class="button">Choose <span class="buttonarrow"></span></a></li>
                    </ul>
                </div>
                
                <div class="pricecol">
                	<ul>
                    	<li class="thead">Unlimited Package</li>
                        <li class="price">$ 29.95 <span>(excl. vat)</span></li>
                        <li class="item">99 GB Webspace</li>
                        <li class="item">10 Domains</li>
                        <li class="item"><span class="yes">PHP 5 enabled</span></li>
                        <li class="item"><span class="yes">24h - Support</span></li>
                        <li class="buy"><a href="#" class="button dark">Choose <span class="buttonarrow"></span></a></li>
                    </ul>
                </div>
            
            </div><div class="clear"></div>
			
			<p>This is just a sample page to show you the different pricing table styles. Its possible to add pricing tables to any full-width or sidebar page.<br />There is CSS for 3, 4 and 5 column tables.<br /><br /></p>
            
			<!-- Divider With Title -->
            <div class="divide">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">Videos</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                </tr></table>
            </div><div class="clear"></div>
            
            <!-- 2 column Videos -->
            <div class="one_half">
            	<div class="scalevid"><iframe src="http//player.vimeo.com/video/38240094?title=0&amp;byline=0&amp;portrait=0" width="460" height="259"></iframe></div>
            </div>
            <div class="one_half lastcolumn">
            	<div class="scalevid"><iframe src="http//www.youtube.com/embed/ziilwlROv1c?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="460" height="259"></iframe></div> 
            </div><div class="clear"></div><br />
            
            <!-- Divider With Title -->
            <div class="divide">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">Lightbox Gallery</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                </tr></table>
            </div><div class="clear"></div>
        
        	<!-- 4 column -->
            <div class="one_fourth">
            <a href="images/lightboxlarge.jpg" data-rel="prettyPhoto[folio]" title="Just a Lightbox Image" data-text="" class="hovering"><img class="scale-with-grid alignleft" src="images/lightboxthumb.jpg" alt="" /></a> 
            </div>
            <div class="one_fourth">
            <a href="images/lightboxlarge2.jpg" data-rel="prettyPhoto[folio]" title="Just a Lightbox Image" data-text="" class="hovering"><img class="scale-with-grid alignleft" src="images/lightboxthumb2.jpg" alt="" /></a> 
            </div>
            <div class="one_fourth">
            <a href="http//vimeo.com/38240094&amp;width=720&amp;height=405" data-rel="prettyPhoto[folio]" title="Just a Lightbox Vimeo Video" data-text="" class="hovering"><img class="scale-with-grid alignleft" src="images/lightboxthumb3.jpg" alt="" /></a> 
            </div>
            <div class="one_fourth lastcolumn">
            <a href="http//www.youtube.com/watch?v=ziilwlROv1c&amp;width=720&amp;height=435" data-rel="prettyPhoto[folio]" title="Just a Lightbox Youtube Video" data-text="" class="hovering"><img class="scale-with-grid alignleft" src="images/lightboxthumb4.jpg" alt="" /></a> 
            </div><div class="clear"></div>

		</div>
        
        <!-- Space Adjuster
        ================================================== -->
        
        <div class="sixteen columns bottomadjust"></div>
            
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap full">
    
        <div class="footer">
        	<div class="sixteen columns">

				<div class="four columns widget alpha">
                    <div>
                        <img src="images/logo_bw.png" alt="" class="scale-with-grid" /><br />
Responsive Creative Template
<div class="threedot"></div>
<h3 style="margin-top: -7px;">Love our site?<br /><span class="themecolor">Spread the word!</span></h3>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fthemeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;send=false&amp;layout=button_count&amp;width=171&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=25" style="border:none; overflow:hidden; width:100%; height:25px;"></iframe>
<iframe src="http//platform.twitter.com/widgets/tweet_button.html?url=http//themeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;text=Crunchy%20Responsive%20Creative%20WordPress%20Theme&amp;lang=de&amp;count=horizontal&amp;via=damojo82&amp;related=envato" style="width:171px; height:20px;"></iframe>
                    </div>
                </div>
                
                
                
                <div class="four columns clearfix widget">
                   <h5>Twitter</h5>
                    <div class="widget_tweets">
                        <ul></ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                
                
                <div class="four columns widget">
                    <h5>Quick Contact</h5>
                    <div class="widget_quickcontact">
                        <form id="quickcontact" method="post" action="#" />
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onfocus="if(this.value == 'Name *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Name *'; }" value='Name *' />
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onfocus="if(this.value == 'Email *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Email *'; }" value='Email *' />
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onfocus="if(this.value == 'Message *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send <span class="buttonarrow"></span></button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div>
                

                          
                <div class="four columns widget omega">
                    <h5>Contact Info</h5>
                    <div class="widget_text">
                        <strong>Company Location</strong><br />
                        Crunchy Studios<br />
                        Mainstreet 123<br />
                        50600, Cologne, Germany<br /><br />
                        
                        <strong>How To Contact Us</strong><br />
                        Email: <a href="mailto:your@email.com">info@yourdomain.com</a><br />
                        Phone: 800.123.4567<br /><br />
                        
                        <strong>Office Hours</strong><br />
                        Mondays-Friday: 09:00 - 18:00<br />
                        Saturday: 10:00 - 15:00
                    </div>
                </div>
                
            </div>
        </div>
	</div><!-- container -->
    
    <!-- Sub-Footer
	================================================== -->
    
    <!-- Change to class="container subfooterwrap full" for a full-width subfooter -->
    <div class="container subfooterwrap full">
    
    	<div class="subfooter">
        	<div class="eight columns siteinfo">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http//shop109193845.taobao.com" title="即刻工作室">即刻工作室</a> Collect from <a href="http//shop109193845.taobao.com" title="即刻工作室" target="_blank">即刻工作室</a></div>
            <div class="eight columns sitenav">
                <a href="#">Home</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Features</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Portfolio</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Blog</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
    
    <div class="backtotop"><div class="btxt">Back to Top</div></div>

<!-- End Document
================================================== -->

</body>
</html>